<template>
<div>
  <t-navbar title="测试题列表" :fixed="true" />
<!--  -->
  <div>
    <t-search v-model="qname" :clearable="true" shape="round" placeholder="请输入测试题名称" @change="search"></t-search>
  </div>
<!--  -->
  <div style="text-align: left;padding-left: 10px;margin-top: 20px">
    <div style="border: 1px solid gainsboro;padding: 10px;border-radius: 20px;margin-bottom: 10px" v-for="q in questions" :key="q.id">
      <div style="margin-top: 10px;font-weight: bold">
        问题{{q.id}}：{{q.question}}？
      </div>
      <div style="font-size: 12px;color: grey;margin-top: 15px">
        <span>{{q.createTime}}</span>
        <span style="margin-left: 20px;color: #747bff">你的选择：{{q.answer==q.answera?'a':'b'}}</span>
      </div>
      <div style="margin-top: 15px;font-size: 14px;text-align: left">
        <div>选项a：{{q.optiona}}</div>
        <t-divider/>
        <div style="margin-top: 4px">选项b：{{q.optionb}}</div>
      </div>
    </div>

  </div>
</div>
</template>

<script setup>
import {ref,onMounted} from "vue";
import {get} from "../util/Request.js";

//属性
const qname=ref("")
const questions=ref([ {
  "id": 11,
  "meid": 3,
  "title": "MBTI人格测试",
  "question": "当你要在一个星期内完成一个大项目，你在开始时候会",
  "optiona": "把要做的工作依次列出",
  "optionb": "马上动工",
  "answera": "VSX4",
  "answerb": "FxGP",
  "answer": null,
  "createTime": "2024-11-06 19:52:43",
  "updateTime": "2024-11-06 19:52:43"
}])

//函数
// Vue生命周期函数
onMounted(()=>{

 search()
})
const search=()=>{
  //请求接口，查询对应的测试题
  get("question/myquestion").then(r=>{
    questions.value=r.data
    console.log(questions.value)
  })
}


</script>

<style scoped>

</style>